<template>
  <!-- 可以进行筛选的标签数组 -->
  <div class="hu-tag-filter">
    <div
      class="hu-tag-filter--item"
      :class="{ active: value == item[props.value], plain: plain }"
      v-for="item in tagList"
      :key="item[props.value]"
      @click="clickItem(item)"
    >
      {{ item[props.text] }}
    </div>
  </div>
</template>

<script>
export default {
  name: "HuTagFilter",
  model: {
    props: "value",
    event: "update",
  },
  props: {
    // 标签数组
    list: {
      type: Array,
      default: () => [],
    },
    // 选中
    value: {
      type: String,
      default: "",
    },
    props: {
      type: Object,
      default: () => {
        return {
          text: "text",
          value: "value",
        };
      },
    },
    // 是否镂空
    plain: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    tagList() {
      if (!this.list.length) return [];
      if (this.list[0].constructor === Object) return this.list;
      return this.list.map((text) => {
        return { text, value: text };
      });
    },
  },
  methods: {
    // 点击选中
    clickItem(item) {
      let value = item[this.props.value];
      this.$emit("update", value);
      this.$emit("change", value, item);
    },
  },
};
</script>

<style lang="less" scoped>
@import "@/less/mixin";
.hu-tag-filter {
  .hu-tag-filter--item {
    display: inline-block;
    word-break: break-all;
    margin: 7px 8px;
    padding: 6px 12px;
    max-width: calc(100% - 16px);
    box-sizing: border-box;
    border: 1px solid @gray-1;
    background-color: @gray-1;
    color: @gray-6;
    border-radius: 20px;
    cursor: pointer;
    &.active {
      color: @white;
      background: @blue;
      border: 1px solid @blue;
      &.plain {
        color: @blue;
        .colorize_bg(@blue,0.2);
      }
    }
  }
}
</style>
